<template>
  <div class="news-types" v-if="channels.length > 0">
      <div class="item" 
        :class="{active: item.channelId == chooseId}" 
        v-for="item in showChannels" 
        :key="item.channelId"
        @click="switchTo(item.channelId)"
        >
          <span class="name">{{item.name}}</span>
        </div>
      <a href="" @click.prevent="isCollapse = !isCollapse">{{ isCollapse ? '展开' : '收起'}}</a>
  </div>
</template>

<script>
import {getNewsChannels} from '@/services/newsService'
export default {
    data(){
        return {
            channels:[],
            isCollapse: true,
            chooseId:null
        }
    },
    computed:{
        showChannels(){
            if(this.isCollapse){
                return this.channels.slice(0,8)
            }else{
                return this.channels;
            }
        }
    },
    async created(){
        var res = await getNewsChannels()
        this.channels = res;
        this.switchTo(this.channels[0].channelId);
    },
    methods:{
        switchTo(id){
            this.chooseId = id;
            this.$emit("change", this.chooseId)
        }
    }
}
</script>

<style scoped>
    .news-types{
        margin: 30px 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        padding-bottom: 15px;
    }
    .item{
        padding: 10px 20px;
        border-radius: 5px;
        border: 1px solid #ccc;
        margin-right: 15px;
        margin: 7px 15px 7px 0;
        cursor: pointer;
        position: relative;
        user-select: none;
    }
    .item:hover{
        background: #ccc;
    }
    .item.active{
        background-color: #000;
        color: #fff;
    }
    a{
        line-height: 55px;
    }
</style>